<template>
  <div id="login">
    <div class="login_div">
      <div class="login_div_centent">
        <el-result :icon="status.icon" :title="status.title" sub-title="请根据提示进行操作">
          <template #extra>
            <el-button v-if="status.icon !== 'success'" type="primary" size="medium" @click="jump('/login')">
              返回系统登录
            </el-button>
            <div v-if="status.icon === 'success'">
              {{ jumpNum }} 秒后跳转至首页
            </div>
            <el-button v-if="status.icon === 'success'" type="primary" size="medium" @click="jump('/')">
              立即跳转至首页
            </el-button>
          </template>
        </el-result>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UISLogin',
  data () {
    return {
      ticket: '',
      status: {
        icon: 'info',
        title: 'UIS 认证中'
      },
      jumpNum: 0
    }
  },
  created () {
    this.ticket = this.$utils.getQueryVariable('ticket')
    this.loginUIS()
  },
  methods: {
    loginUIS () {
      // const service = window.location.protocol + '//' + window.location.host + '/#/login'
      const service = sessionStorage.getItem('UIS_LOGIN')
      this.$api.loginApi.loginUIS({
        service: service,
        ticket: this.ticket
      }).then(response => {
        const { refreshToken } = response.data
        this.$store.commit('SET_TOKEN', refreshToken)
        this.status = {
          icon: 'success',
          title: 'UIS 认证通过'
        }
        this.jumpNum = 1
        const siv = setInterval(() => {
          this.jumpNum--
          if (this.jumpNum === 0) {
            clearInterval(siv)
            this.jump('/')
          }
        }, 1000)
      }).catch(error => {
        this.status = {
          icon: 'error',
          title: 'UIS 认证失败'
        }
        console.error(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  #login{
    background: #545C64;
    height: 100%;
    .login_div{
      padding-top: 15%;
      margin: 0 auto;
      width: 20%;
      .login_div_centent{
        background: white;
        padding: 30px;
        filter: drop-shadow(0 0 5px white);
        .form_subimt{
          margin-top: 10px;
        }
      }
    }
  }

</style>
